<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400" rel="stylesheet">
    <link rel='stylesheet' href='<%= rootPath %>/css/style.css' />
    <link rel='stylesheet' href='<%= rootPath %>/css/projects.css' />

    <!-- JQuery -->
    <script src="<%= rootPath %>/js/lib/jquery-1.12.4.min.js"></script>

    <!-- lib js files -->
    <script src="<%= rootPath %>/js/lib/ejs_production.js"></script>
    <script src='<%= rootPath %>/js/lib/jquery.hideseek.min.js'></script>

    <!-- script files -->
    <script src='<%= rootPath %>/js/tooltip.js'></script>
    <script src='<%= rootPath %>/js/projects.js'></script>

  </head>
  <body data-root="<%= rootPath %>">
    <%- include partials/nav.ejs %>
    <div class="container">
      <input
        autocomplete="off"
        data-list=".default-list"
        id="search"
        placeholder="Search for project"
        type="text"
      >
      </input>
      <div class="projects-loader">
        Loading additional project information...
        <img src="<%= rootPath %>/images/loading2.gif">
      </div>
      <div class="projects default-list">
        <% for(var i=0; i<projects.length; i++) { %>
          <a href="<%= rootPath %>/projects/<%= projects[i].project.id %>/models">
            <div class="project" data-id=<%=projects[i].project.id %>>
              <div class="project-name"><%= projects[i].project.name %></div>
              <div class="project-num-models"></div>
              <div class="project-info-container">
                <div class="project-date"></div>
                <div class="project-author"><%= projects[i].project.author %></div>
                <div class="project-desc"><%= projects[i].project.description %></div>
                <div class="project-model-types-bar"></div>
              </div>
              <div class="project-info-container">
                <div class="project-metrics-container">
                  <div class="project-metric-names project-metrics-column"></div>
                  <div class="project-min-models project-metrics-column"></div>
                  <div class="project-max-models project-metrics-column"></div>
                  <div class="project-avg-models project-metrics-column"></div>
                </div>
              </div>
            </div>
          </a>
        <% } %>
      </div>
    </div>
  </body>
</html>
